<template>
	<div class="page" style="width:99.4%;margin:0 auto;overflow:visible;">
		<div class="top" style="padding-right: 0;">
			<div style="float:left;"><span>个人中心</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div>
		<!-- 个人信息 -->
		<div id="leftInfo">
			<el-form :model="form" block id="addform" :disabled="able" >
				<el-form-item label="用户名称:" :label-width="formLabelWidth">
					<!-- 测试账号不让修改名称 -->
					<el-input v-model.tirm="form.user_name" auto-complete="off"  class="inpu" placeholder="请输入用户名称,必填"></el-input>
				</el-form-item>
				<!-- <el-form-item label="用户类型:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-select v-model="form.user_type" disabled placeholder="" class="inpu">
						<el-option v-for="item in userTypes" :value="item.value" :key="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="手机号:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.mobile" auto-complete="off" class="inpu" placeholder="请输入手机号,必填"></el-input>
				</el-form-item>
				<!-- <el-form-item label="邮箱:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.email" auto-complete="off" class="inpu" placeholder="请输入邮箱,选填"></el-input>
				</el-form-item> -->
				<!-- <el-form-item label="职位:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.position" auto-complete="off" class="inpu" placeholder="请输入职位,选填"></el-input>
				</el-form-item> -->
				<el-form-item label="平台名称:" :label-width="formLabelWidth" style="margin-top:-0.2rem;" v-if="form.site_auth==1">
					<el-input v-model.trim="form.site_name" auto-complete="off" class="inpu" placeholder="请输入平台名称"></el-input>
				</el-form-item>
				<el-form-item label="监控模式:" :label-width="formLabelWidth" class="formline">
					<el-select v-model="form.monitor_mode" placeholder="选择监控模式" class="inpu">
						<el-option v-for="item in viewModes" :value="item.value" :key="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-show="form.monitor_mode==0 && !able" label="自定义监控菜单:"  class="formline"  style="margin-top:-0.1rem;" :label-width="formLabelWidth">
					<div class="sensorHead" ref="sensorHead" >
						<!-- <span class="topTitle"  style="text-align: left;">默认名称</span> -->
						<span class="topTitle" style="margin-left:0.7rem;">名称</span>
						<span class="topTitle" style="width:1.2rem;margin-left:0.4rem;">排序</span>
						<span class="topTitle" style="margin-left:0.35rem;">是否显示</span>
						<span class="topTitle" style="margin-left:0.1rem;">默认监控</span>
					</div>
					<div v-for="(item,i) in form.monitor_menu" :key="item.key" class="oneDomain">
						<el-input class="inpu_2" v-model="item.title" :placeholder="item.title" ></el-input>
						<el-input class="inpu_2" style="width:1.4rem;margin-left:0.5rem;margin-right:0.4rem" v-model="item.number" placeholder="排序" ></el-input>
						<span class="oneBox" :class="item.isShow==1?'isChoose':'onChoose'"    @click="chooseOneShow(i)"><span>√</span></span>

						<span class="oneBox" :class="item.isIndex==1?'isChoose':'onChoose'"  style="margin-left:1.6rem;"  @click="chooseOneIndex(i,item,item.isIndex)"><span>√</span></span>
					</div>
				</el-form-item>
				<!-- <el-form-item label="平台首页:" :label-width="formLabelWidth" style="margin-top:-0.2rem;" class="formline">
					<el-select v-model="form.index_page" placeholder="选择默认首页" class="inpu">
						<el-option v-for="item in pages" :value="item.value" :key="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item> -->
				<!-- <el-form-item label="项目列表:" :label-width="formLabelWidth" style="margin-top:-0.2rem;" class="formline">
					<el-select v-model="form.products_view" class="inpu">
						<el-option v-for="item in showProducts" :value="item.value" :key="item.value" :label="item.label">
						</el-option>
					</el-select>
					<el-tooltip placement="top" effect="light">
						<div slot="content" style="line-height:0.4rem;color:red;">此项作用于监控中心，意为是否默认展开左边的项目列表</div>
						<span class="sortIcon" style="color:red;">?</span>
					</el-tooltip>
				</el-form-item> -->
				<!-- <el-form-item label="创建账号:" :label-width="formLabelWidth" v-if="grade<3" style="margin-top:-0.2rem;">
					<el-switch :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;" disabled v-model="form.enable_create" active-color="#13ce66"
					 inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
				<!-- <el-form-item label="设备读写:" :label-width="formLabelWidth" v-if="grade<3" style="margin-top:-0.4rem;">
					<el-switch :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;" disabled v-model="form.equip_auth" active-color="#13ce66"
					 inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
				<!-- <el-form-item label="接收报警:" :label-width="formLabelWidth" v-if="grade<3" style="margin-top:-0.4rem;">
					<el-switch :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;" v-model="form.enable_receive" active-color="#13ce66"
					 inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
				<!-- <el-form-item label="是否开发者:" :label-width="formLabelWidth" v-if="grade==1" style="margin-top:-0.4rem;">
					<el-switch :width="stateWidth" class="demo" style="display:inline-block;vertical-align:top;" v-model="form.is_developer" active-color="#13ce66"
					 inactive-color="#ccc" active-text="开" inactive-text="关" :active-value="one"
					 :inactive-value="zero">
					</el-switch>
				</el-form-item> -->
				<el-form-item v-if="userType>1 && form.is_developer==1" label="AppID:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.app_id" auto-complete="off" class="inpu" style="width:6.5rem" disabled show-password id="appid"  type="password"></el-input>
					<i class="el-icon-view flr" @click="showId"></i>
				</el-form-item>
				<el-form-item v-if="userType>1 && form.is_developer==1" label="AppSecret:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.app_secret" auto-complete="off" class="inpu" style="width:6.5rem" show-password disabled id="secret" type="password"></el-input>
					<i class="el-icon-view flr" @click="showSecret"></i>
				</el-form-item>
				<el-form-item v-if="userType>1 && form.is_developer==1" label="IP白名单:" :label-width="formLabelWidth" style="margin-top:-0.2rem;">
					<el-input v-model.trim="form.whitelist" auto-complete="off" class="inpu" style="width:6.5rem" type="textarea" :rows="2" placeholder="可为空,白名单IP地址,多个用','(英文逗号)隔开,"></el-input>
				</el-form-item>
				<el-form-item label="添加时间:" :label-width="formLabelWidth" style="margin-top:-0.3rem;">
					<span >{{form.reg_time}}</span>
				</el-form-item>
			</el-form>
			<div v-if="btn" style="margin-left:0.8rem;margin-top:-0.4rem;text-align: left;">
				<el-button type="primary" size="small" @click="edit">编辑</el-button>
			</div>
			<div v-else style="margin-left:0.8rem;margin-top:-0.4rem;text-align: left;">
				<el-button type="success" size="small" @click="updateMy">更新</el-button>
				<el-button type="primary" size="small" @click="cancel">取消</el-button>
			</div>
		</div>
		<!-- 日志记录 -->
		<div id="rightTable">
			<div class="tableTitle">日志记录</div>
			<div class="container_table">
				<el-table :data="tabledata" size="mini" border style="width:100%;"
				 :header-cell-style="{
					'background-color':tableHead,
					'color': 'white',
			        'fontSize':'0.3rem',
					'height':'0.6rem',
					'line-height':'0.6rem',
					'padding':'0.1rem'
				}" :cell-style="{'fontSize':'0.3rem'}">
					<!-- <el-table-column type="selection" min-width="30" fixed header-cell-style="color:red;background-color:blue;">
					</el-table-column> -->
					<el-table-column label="ID" prop="id" align="center" min-width="50">
					</el-table-column>
					<el-table-column prop="user_name" label="用户名称" align="center" min-width="120">
					</el-table-column>
					<el-table-column prop="info" label="信息" align="center" min-width="120">
					</el-table-column>
					<el-table-column prop="ip" label="登录IP" align="center" min-width="150">
					</el-table-column>
					<!-- <el-table-column prop="trigger_cond" label="登录地址" align="center" min-width="150">
			    </el-table-column> -->
					<el-table-column prop="log_time" label="时间" align="center" min-width="150">
					</el-table-column>

				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="current_change" :current-page="queryParams.pageNo"
					 :page-size="queryParams.pageSize" :page-sizes="[10,15,20]" layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'profile',
		data() {
			return {
				id:0,
				stateWidth:60,
				one:1,
				zero:0,
				userType:Number(localStorage.getItem("atuser_type")),
				isDeveloper:Number(localStorage.getItem('isDeveloper'))||0,
				queryParams: {
					pageNo: 1,
					pageSize: 15,
					total: 0
				},
				viewModes:[
					{
						value:0,
						label:'标准模式'
				    },
					{
						value:1,
						label:'组态模式'
					},
				],
				userTypes:[
					{
					    value:1,
					    label:'超级管理员'
				    },
					{
						value:2,
						label:'普通管理员'
				    },
					{
						value:3,
						label:'普通用户'
					}
				],
				// showProducts:[
				// 	{
				// 		value:1,
				// 		label:'展开'
				// 	},
				// 	{
				// 		value:0,
				// 		label:'折叠'
				// 	}
				// ],
				// pages:[
				// 	{
				// 	   value:1,
				// 	   label:"设备地图(默认)"
				//     },{
				// 	   value:2,
				// 	   label:"监控中心"
				//     },{
				// 	   value:3,
				// 	   label:"大屏监控"
				//     }
				// ],
				user: [],
				btn: true,
				able: true,
				tableHead:localStorage.getItem("bgcolor"),
				formLabelWidth: '2.4rem',
				form: {},
				form: {
					id:0,
					//grade:1,
					//products_view:1,
				    user_name: '',
				    mobile: '',
					//user_type:2,
				    //email: '',
				    site_name: '',
					//index_page:1,
				    site_auth: 0,  //子用户的命名权限
					//user_state: '',
					monitor_mode:0,
					monitor_menu:[],
					reg_time:'',
					is_developer:0,
					app_id:'',
					app_secret:'',
					whitelist:""
				    //enable_create: '',
				   // enable_receive: '',
				   // equip_auth: '',
				   // parent: '',
				   // parent_id: '',
					//parent_grade:1
				},
				tabledata: []
			}
		},
		created() {
            this.id=localStorage.getItem('at_userId');
			this.showInfo(this.id);
			this.showList(1, this.queryParams.pageSize,this.id);
		},
		methods: {
			showList: function(num, size, id) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/user/logs',
						data: {
							"id": id,
							"limit": size,
							"page": num

						}
					}).then(res => {

						if(res && res.data.result=="success"){
							this.tabledata = res.data.data;
							this.queryParams.total = res.data.count;
						}
					}).catch(error => {
						console.log(error);
						this.tabledata = [];
						this.queryParams.total = 0;
						this.queryParams.pageNo = 1;
                    });
			},
			showInfo(id) {
				var that = this;
				this.$http({
						method: 'post',
						url: 'api/user/info',
						data: {
							"id": id

						}
					}).then(res => {
						if(res && res.data.result=="success"){
							for(var key in this.form){
								this.form[key] = res.data.data[key];
							}
             // this.form.monitor_menu.push({title: "定制报表",key: "statement",number:3,isShow:1,isIndex:0});
							//this.form = res.data.data;
							//console.log(res.data.data);
						}
					}).catch(error => {
						console.log(error);
					});
			},
			edit() {
				this.able = false;
				this.btn = false;
			},
			cancel() {
				this.able = true;
				this.btn = true;
				this.showInfo(this.id);
			},

			chooseOneIndex(n,item,isIndex){
				this.form.monitor_menu[n].isIndex=this.form.monitor_menu[n].isIndex==1?0:1;
				if(this.form.monitor_menu[n].isIndex){
					this.form.monitor_menu[n].isShow=1;
					for(let i=0,len=this.form.monitor_menu.length;i<len;i++){
						if(this.form.monitor_menu[i].key!=item.key){
							this.form.monitor_menu[i].isIndex=0;
						}
					}
				}
				let  without=this.form.monitor_menu.every(function(item,index,arr){
					return item.isIndex==0
				})
				if(without){
					this.form.monitor_menu[0].isIndex=1;
					this.form.monitor_menu[0].isShow=1;
				}

			},

			//选中当前一个或取消的函数；
			chooseOneShow(index){
				this.form.monitor_menu[index].isShow=this.form.monitor_menu[index].isShow==1?0:1;
				if(this.form.monitor_menu[index].isShow==0 && this.form.monitor_menu[index].isIndex==1){
					this.$message({
						message: '默认监控项必须显示，或先取消默认!',
						type: 'info',
						center: true
					})
					this.form.monitor_menu[index].isShow=1;
					return
				}
				let  without=this.form.monitor_menu.every(function(item,index,arr){
					return item.isShow==0
				})
				if(without){
					this.$message({
						message: '请至少保留一个菜单!',
						type: 'info',
						center: true
					})
					this.form.monitor_menu[index].isShow=1;
				}
			},

			updateMy() {
				var that = this;
				this.form.id=this.id;
        var reTel = /^1[3-9][0-9]\d{8}$/;
				//var reEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
				if (this.form.user_name && this.form.mobile) {
					if (!reTel.test(that.form.mobile)) {
						that.$message({
							message: '手机号格式不正确，请重新输入!',
							type: 'error',
							center: true
						});
						return false
					}

          this.$http({
							method: 'post',
							url: 'api/user/update',
							data:this.form
						}).then(res => {
							if (res && res.data.result == "success") {
								this.$message({
									message: '恭喜,修改个人资料成功!',
									type: 'success',
									center: true
								});
								this.$parent.site_name=this.form.site_name;
								localStorage.setItem("monitorMode", this.form.monitor_mode);
                this.form.monitor_menu.sort((last,next)=>Number(last.number) - Number(next.number));
                //console.log(this.form.monitor_menu);
                localStorage.setItem("monitorMenu",JSON.stringify(this.form.monitor_menu));
								localStorage.setItem("site_name",this.form.site_name);
                setTimeout(function(){
                  that.goBack();
                },1000);
							}
						}).catch(error => {
							console.log(error);
						});
				} else if (!this.form.user_name) {
					that.$message({
						message: '用户名称不能为空，请输入!',
						type: 'warn',
						center: true
					});
					return
				} else if (!this.form.mobile) {
					that.$message({
						message: '手机号不能为空，请输入!',
						type: 'warn',
						center: true
					});
					return
				}

			},

			current_change: function(currentPage) {
				this.queryParams.pageNo = currentPage;
				this.showList(currentPage, this.queryParams.pageSize,this.id);
			},
			handleSizeChange(val) {
				this.queryParams.pageSize = val;
				this.showList(this.queryParams.pageNo, val,this.id);
			},

			showId(event) {
				if (document.getElementById("appid").type == "password") {
					document.getElementById("appid").type = "text";
					event.target.style.color = "deepskyblue";
				} else {
					document.getElementById("appid").type = "password";
					event.target.style.color = "#ccc";
				}

			},
			showSecret(event) {
				if (document.getElementById("secret").type == "password") {
					document.getElementById("secret").type = "text";
					event.target.style.color = "deepskyblue";
				} else {
					document.getElementById("secret").type = "password";
					event.target.style.color = "#ccc";
				}
			},

			goBack() {
				this.$router.go(-1);
			}
        }
	}
</script>

<style scoped>

	#addform {
		text-align: left;
		margin-top: 0.3rem;
		height:auto!important;
		/* border:1px solid red; */
	}

	.inpu {
		width:6.5rem;
	}

	#leftInfo {
		float: left;
    width: 30%;
		min-height: 17rem;
		/* border:1px solid red; */
	}

	#rightTable {
		float: right;
		width: 66%;
		min-height:17rem;
		/* overflow:auto; */
		/* border:1px solid green; */
		border-left: 1px solid #ccc;
	}

	.tableTitle {
		width: 99.3%;
		height: 0.8rem;
		line-height: 0.8rem;
		box-sizing: border-box;
		padding-left: 0.2rem;
		text-align: left;
		font-size: 0.34rem;
		border-bottom: 1px solid #ccc;
	}
    .container_table {
		margin: 0.2rem;
		margin-bottom:0;
		padding: 0;
	}

	.flr {
		font-size: 0.4rem;
		vertical-align: middle;
		margin-left:0.1rem;
		color:#ccc;
	}

	.inpu /deep/ .el-input__inner{
		padding-left:4px;
	}

	.inpu /deep/ .el-textarea__inner{
		padding-left:4px;
	}

	.sortIcon {
		display:inline-block;
		vertical-align: middle;
		margin-left:0.1rem;
	    width: 0.3rem!important;
	    height: 0.3rem;
	    font-size: 0.25rem;
	    line-height: 0.3rem;
	    text-align: center;
	    color: #999;
	    background-color: #ccc;
	}

	/* @media all and (max-width:2560px) {
	    .sensorHead {
	        width:25%!important;
	    }

	}

	@media all and (max-width:1920px) {
	    .sensorHead {
	        width: 35%!important;
	    }

	} */

	@media all and (max-width:1600px) {
	    #addform {
	        margin-left: -0.3rem!important;
	    }
	    .oneDomain {
	        margin-top: 0.2rem !important;
	    }
	}

	@media all and (max-width:1366px) {
	    #addform {
	        width: 100%!important;
	        margin-left: 0rem!important;
	    }
	   /* .tip {
	        font-size: 0.4rem!important;
	    } */
	}


	.sensorHead {
		margin-left:0!important;
	    height:0.8rem;
	    line-height:0.8rem;
	    /* border:1px solid red; */
	    width:100%;
	    border-bottom: 1px solid #111;
	    margin: -0.2rem 0 0.1rem 0;
	    padding: 0;
	    padding-left: 0.2rem;
	}

	.oneDomain>>>.el-input__inner {
	    padding-left: 2px;
	    padding-right: 2px;
		text-align: center;
		height:0.6rem!important;
		line-height:0.6rem!important;
		border:none;
		margin-top:-0.1rem;
		border:1px solid #ccc!important;

	}

	.oneDomain>>>.el-select__caret {
	    font-size: 12px;
	}

	.oneDomain>>>.el-input__icon {
	    width: 14px;
	}

	.inpu {
	    width: 5rem;
	    vertical-align: middle;
	    /* transform: translateY(0.1rem)!important; */
	}

	.inpu_2 {
	    width: 2.2rem;
	    margin-right: 0.1rem;
		height:0.6rem!important;
		line-height:0.6rem!important;
		text-align: center;
	    vertical-align: middle;
		border:none;
	}

	.topTitle{
		display:inline-block;
		width:2rem;
		height:0.6rem!important;
		line-height:0.6rem!important;
	    /* text-align: center; */
		vertical-align: middle;

	}

	.oneDomain {
	    margin-left: 0.4rem;
	    height: 0.7rem;
	    line-height: 0.7rem;
	    width:60%;
		/* margin-top:-0.2rem; */
	    white-space: nowrap;
	}

	.oneBox,.typeBox{
		display: inline-block;
		width:0.5rem;
		height:0.5rem!important;
		line-height:0.5rem;
		text-align:center;
		transform: translateY(2px);
		margin-left:0.5rem;
		cursor:pointer;
		border-radius: 4px;
    overflow:hidden;
  }

	.typeBox{
		margin:0;
	}

	.isChoose{
		border:1px solid #409eff;
		color:#fff;
		background-color:#409eff;
	}
	.onChoose{
		border:1px solid #ccc;
		color:#fff;
		background-color:#fff;
	}

	.inpu /deep/ .el-input__inner{
		padding-left:4px;
		padding-right:4px;
	}

	.inpu /deep/ .el-textarea__inner{
		padding-left:4px;
		padding-right:4px;
	}
</style>
